<template>
  <el-dialog
    :title="title"
    :close-on-click-modal="false"
    width="840px"
    @open="handleOpen"
    @close="handleClose"
    :visible.sync="visible">

    <el-table
      :key="tableKey"
      :data="tableData"
      v-loading="loading"
      element-loading-text="正在加载..."
      style="width: 100%;">

      <el-table-column label="集装箱号/提单号" property="recordNo" width="150">
        <template slot-scope="scope">
          <a @click="view(scope.row.recordNo)">{{scope.row.recordNo}}</a>
        </template>
      </el-table-column>
      <el-table-column label="到港时间" property="actTime" width="130">
        <template slot-scope="scope">
          {{scope.row.actTime | parseTime}}
        </template>
      </el-table-column>
      <el-table-column label="箱主代码" property="owner" width="70"></el-table-column>
      <el-table-column label="进出口" property="ieFlag" width="100">
        <template slot-scope="scope">
          {{scope.row.ieFlag | ieFlagFilter}}
        </template>
      </el-table-column>
      <el-table-column label="重吉" property="leFlag" width="50">
        <template slot-scope="scope">
          {{scope.row.leFlag | leFlagFilter}}
        </template>
      </el-table-column>
      <el-table-column label="扣留标记" property="holdFlag" width="70">
        <template slot-scope="scope">
          {{scope.row.holdFlag | holdFlagFilter}}
        </template>
      </el-table-column>
      <el-table-column label="堆场代码" property="yardCode" width="110"></el-table-column>
      <el-table-column label="作业类型" property="actType" width="110">
        <template slot-scope="scope">
          {{scope.row.actType | activityTypeFilter}}
        </template>
      </el-table-column>
      <el-table-column label="作业时间" property="actTime" width="130">
        <template slot-scope="scope">
          {{scope.row.actTime | parseTime}}
        </template>
      </el-table-column>
      <el-table-column label="集装箱尺寸" property="sizeId"></el-table-column>
      <el-table-column label="集装箱类型" property="contType"></el-table-column>
      <el-table-column label="港口" property="portCode" width="120">
        <template slot-scope="scope">
          {{scope.row.portCode | portCodeFilter}}
        </template>
      </el-table-column>
    </el-table>
    <div class="clearfix">
      <div class="pagination-container align-right fr" v-show="tableData.length > 0">
        <el-pagination
          background
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page.sync="dataForm.pageNum"
          :page-size="5"
          layout="total, prev, pager, next"
          :total="total">
        </el-pagination>
      </div>
    </div>

    <el-dialog
      width="740px"
      title="综合查询"
      :visible.sync="innerVisible"
      append-to-body>
      <el-scrollbar :native="false" wrap-class="scroll-list">
        <div class="app-container" style="overflow-y: hidden">
          <el-tabs v-model="activeName">
            <el-tab-pane label="集装箱最新动态" name="first">
              <table class="multi-table el-table el-table--mini">
                <tr>
                  <td class="tit">集装箱号</td>
                  <td>TEMU8966995</td>
                  <td class="tit">集装箱尺寸</td>
                  <td>45</td>
                  <td class="tit">集装箱类型</td>
                  <td>G1</td>
                </tr>
                <tr>
                  <td class="tit">箱主代码</td>
                  <td>--</td>
                  <td class="tit">船公司编号</td>
                  <td>MTSL</td>
                  <td class="tit">船舶编号</td>
                  <td>ZZ</td>
                </tr>
                <tr>
                  <td class="tit">航次编号</td>
                  <td>ZZZZZ</td>
                  <td class="tit">进/出口标记</td>
                  <td>U-未指定</td>
                  <td class="tit">提单号</td>
                  <td>--</td>
                </tr>
                <tr>
                  <td class="tit">重吉标记</td>
                  <td>E-吉</td>
                  <td class="tit">扣留标记</td>
                  <td>Y-是</td>
                  <td class="tit">集装箱位置</td>
                  <td>--</td>
                </tr>
                <tr>
                  <td class="tit">卸货港</td>
                  <td>--</td>
                  <td class="tit">装货港</td>
                  <td>NNI</td>
                  <td class="tit">集装箱作业类型</td>
                  <td>GI-闸口交箱</td>
                </tr>
                <tr>
                  <td class="tit">集装箱作业时间</td>
                  <td>2018-09-28 19:14</td>
                  <td class="tit">拖车号</td>
                  <td>Y37246</td>
                  <td class="tit">备注</td>
                  <td>--</td>
                </tr>
                <tr>
                  <td class="tit">大船公司</td>
                  <td>--</td>
                  <td class="tit">大船公司名称</td>
                  <td>--</td>
                  <td class="tit">集装箱堆场位置/仓位</td>
                  <td>H2-82-5-4</td>
                </tr>
                <tr>
                  <td class="tit">损毁代码</td>
                  <td>--</td>
                  <td class="tit">集装箱状态</td>
                  <td>U</td>
                  <td class="tit">封条号</td>
                  <td>--</td>
                </tr>
                <tr>
                  <td class="tit">船舶中文名称</td>
                  <td>--</td>
                  <td class="tit">船舶英文名称</td>
                  <td>--</td>
                  <td class="tit">毛重</td>
                  <td>--</td>
                </tr>
              </table>
            </el-tab-pane>
            <el-tab-pane label="舱单信息" name="second">
              <table class="multi-table el-table el-table--mini">
                <tr>
                  <td class="tit">运输工具编号</td>
                  <td>5304550107</td>
                  <td class="tit">航次号</td>
                  <td>511401809230</td>
                  <td class="tit">运输方式</td>
                  <td>海上运输(1</td>
                </tr>
                <tr>
                  <td class="tit">中文船名</td>
                  <td>翔富1</td>
                  <td class="tit">船公司编号</td>
                  <td>--</td>
                  <td class="tit">英文船名</td>
                  <td>XIANG FU 1</td>
                </tr>
                <tr>
                  <td class="tit">出港日期</td>
                  <td>2018-09-27</td>
                  <td class="tit">申报日期</td>
                  <td>2018-09-25</td>
                  <td class="tit">提单总数</td>
                  <td>18</td>
                </tr>
                <tr>
                  <td class="tit">空箱总数</td>
                  <td>0</td>
                  <td class="tit">集装箱总数</td>
                  <td>39</td>
                  <td class="tit">总重量</td>
                  <td>742626.28</td>
                </tr>
                <tr>
                  <td class="tit">总件数</td>
                  <td>1834</td>
                  <td class="tit">关区</td>
                  <td>南海三山(5119)</td>
                  <td class="tit">第一起运港</td>
                  <td>5114/南海平洲</td>
                </tr>
                <tr>
                  <td class="tit">第二起运港</td>
                  <td>南海三山(5119)</td>
                  <td class="tit">第三起运港</td>
                  <td>--</td>
                  <td class="tit">第四起运港</td>
                  <td>--</td>
                </tr>
                <tr>
                  <td class="tit">船长姓名</td>
                  <td>代小双</td>
                  <td class="tit">船员姓名</td>
                  <td>彭柱荣 曾令彪 宋仁红 彭 娟 胡志伟 梁昌文</td>
                  <td class="tit"></td>
                  <td></td>
                </tr>
              </table>
            </el-tab-pane>
            <el-tab-pane label="提单信息" name="third">
              <table class="multi-table el-table el-table--mini">
                <tr>
                  <td class="tit">提单号</td>
                  <td>HKG1804794SSN0102</td>
                  <td class="tit">发货单位</td>
                  <td>建华船务有限公司@16/F Nan Dao Commercial Building，359-361 Queen`s</td>
                  <td class="tit">收货单位</td>
                  <td>佛山市南海南捷彩印包装有限公司@佛山市南海平洲夏南一工业区</td>
                </tr>
                <tr>
                  <td class="tit">起运港</td>
                  <td>1039/香港</td>
                  <td class="tit">抵运地</td>
                  <td>南海(44289)</td>
                  <td class="tit">卸货地</td>
                  <td>南海三山(51190)</td>
                </tr>
                <tr>
                  <td class="tit">货物名称</td>
                  <td>牛皮纸</td>
                  <td class="tit">件数</td>
                  <td>307</td>
                  <td class="tit">包装种类</td>
                  <td>其他(7)</td>
                </tr>
                <tr>
                  <td class="tit">麦头/合同号</td>
                  <td>N/M</td>
                  <td class="tit">体积(立方米)</td>
                  <td>0</td>
                  <td class="tit">毛重</td>
                  <td>278273</td>
                </tr>
                <tr>
                  <td class="tit">集装箱数</td>
                  <td>12</td>
                  <td class="tit"></td>
                  <td></td>
                  <td class="tit"></td>
                  <td></td>
                </tr>
              </table>
            </el-tab-pane>
            <el-tab-pane label="报关单信息" name="fourth">
              <table class="multi-table el-table el-table--mini">
                <tr>
                  <td class="tit">申报单位名称</td>
                  <td>佛山市口岸报关有限公司</td>
                  <td class="tit">货主名称</td>
                  <td>ower</td>
                  <td class="tit">装货港</td>
                  <td>中国香港</td>
                </tr>
                <tr>
                  <td class="tit">境内目的地</td>
                  <td>高明珠江货运码头</td>
                  <td class="tit">进出口日期</td>
                  <td>20180927</td>
                  <td class="tit">运输工具代码</td>
                  <td>5304550057</td>
                </tr>
                <tr>
                  <td class="tit">航次号</td>
                  <td>51810180970</td>
                  <td class="tit">提单号</td>
                  <td>EGM181157</td>
                  <td class="tit">商品名称</td>
                  <td>其他铜合金</td>
                </tr>
              </table>
            </el-tab-pane>
          </el-tabs>

        </div>
      </el-scrollbar>
      <div slot="footer" class="dialog-footer">
        <el-button @click="innerVisible = false">关闭</el-button>
      </div>
    </el-dialog>
  </el-dialog>
</template>

<script>
  // api
  import { detailByArea } from '@/api/storageYard'
  // vuex
  import { mapGetters } from 'vuex'

  export default {
    name: 'cont-dialog',
    data() {
      return {
        tableKey: 0,
        tableData: [],
        loading: false,
        dataForm: {
          portId: '',
          areaCode: '',
          pageNum: 1,
          pageSize: 5
        },
        total: 0,
        result: {},
        visible: false,
        innerVisible: false,
        activeName: 'first'
      }
    },
    computed: {
      title() {
        return `${this.dataForm.areaCode}区域集装箱查询`
      },
      ...mapGetters([
        'currentId',
        'isAdmin'
      ])
    },
    methods: {
      init({ portId, areaCode }) {
        this.dataForm.portId = portId
        this.dataForm.areaCode = areaCode
        this.visible = true
      },
      view(recordNo) {
        this.innerVisible = true
      },
      handleOpen() {
        this._detailByArea()
      },
      handleClose() {
        this.dataForm.pageNum = 1
      },
      _detailByArea() {
        this.tableData = []
        this.loading = true
        detailByArea(this.dataForm).then((res) => {
          this.tableData = res.data.data.dataList
          this.total = res.data.data.total
          this.loading = false
        })
      },
      handleSizeChange(val) {
        this.dataForm.pageSize = val
        this._detailByArea()
      },
      handleCurrentChange(val) {
        this.dataForm.pageNum = val
        this._detailByArea()
      }
    }
  }
</script>


<!-- Add "scoped" attribute to limit CSS to this component only -->
<style lang="scss" rel="stylesheet/scss" type="text/scss">
  .multi-table {
    &:before {
      height: 0;
    }

    td {
      padding: 6px 8px;
    }

    .tit {
      white-space: nowrap;
      background-color: rgb(239, 247, 255);
    }
  }
</style>
